<template>
  <div class="table-box" v-loading="loading">
    <ProTable
      ref="proTable"
      title="门禁组列表"
      rowKey="rgid"
      :columns="columns"
      :request-api="getTableList"
      :data-callback="dataCallback"
      :tool-button="false"
      :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
      :small="true"
    >
      <template #tableHeader="scope">
        <el-button type="primary" text :icon="CirclePlus" @click="dialogVisible = true">增加</el-button>
        <el-button type="danger" text :icon="Delete" @click="_batchDel(scope.selectedListIds)">删除</el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
    </ProTable>
    <RuleGroupDialog :dialogVisible="dialogVisible" :handleClose="handleClose" :submitCallback="_submitRuleGroup" />
  </div>
</template>

<script setup lang="tsx" name="roleInfo">
import { ref, watch } from "vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import RuleGroupDialog from "./RuleGroupDialog.vue";

import { addGroup, getGroupEmpList } from "@/api/modules/accessControl/empower/cardholder";
import { ElMessage, ElMessageBox } from "element-plus";
import { delGroup } from "@/api/modules/accessControl/empower/cardholder";

const loading = ref(false);
const dialogVisible = ref(false);

const proTable = ref();

const dataCallback = (data: any) => {
  const { records, page } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  if (!props.empid) return false;
  loading.value = true;
  let newParams = JSON.parse(JSON.stringify(params));
  return getGroupEmpList({ ...newParams, empId: props.empid, rgFlag: 0 });
};

const columns = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "clause",
    label: "名称",
    isShow: false,
    search: {
      el: "input"
    }
  },
  {
    prop: "areaid",
    label: "区域",
    minWidth: 200
  },
  {
    prop: "rgfullname",
    label: "名称",
    minWidth: 200
  }
];

const _submitRuleGroup = async ids => {
  try {
    await addGroup({ empIds: [props.empid], rgIds: ids });
    ElMessage.success("新增成功");
    proTable.value.clearSelection();
    proTable.value.reset();
    dialogVisible.value = false;
  } catch (error) {}
};

const _batchDel = async (selectedListIds: string[]) => {
  if (!selectedListIds.length) {
    ElMessage.error("请选择门禁组");
    return false;
  }
  ElMessageBox.confirm(`是否删除所选门禁组?`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  }).then(async () => {
    try {
      const res = await delGroup({ empIds: [props.empid], rgIds: selectedListIds });
      const { v1, v2 } = res.data;
      ElMessage.success(`删除成功：${v1},失败：${v2}`);

      proTable.value.clearSelection();
      proTable.value.getTableList();
    } catch (error) {
      console.log(error);
    }
  });
};

const handleClose = () => {
  dialogVisible.value = false;
};

const props = defineProps<{
  empid: string;
}>();

watch(
  () => props.empid,
  nV => {
    if (nV) {
      proTable.value.getTableList();
    }
  }
);
</script>
<style lang="scss" scoped>
.table-box {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 50px);
  padding: 10px 0;
  overflow-y: auto;
}
</style>
